<template>
  <div class="commission">
    <dt-search ref="search" @reset="resetFun">
      <Button type="primary" v-if="unlocking('0111010200')" @click="onInitiate">请佣发起</Button>
      <Button type="primary" style="margin-left: 10px">
        <a
          href="https://images.tospurfang.com/doc/%E8%AF%B7%E4%BD%A3%E5%8F%91%E8%B5%B7%E6%93%8D%E4%BD%9C%E8%AF%B4%E6%98%8E.pdf"
          style="color: #fff"
          target="_blank">
          查看操作指引
        </a>
      </Button>
    </dt-search>

    <dt-grid ref="table" page :onFetch="onFetch" />

    <initiate-modal ref="initiate" @success="onSuccess"></initiate-modal>
    <history-import-modal ref="history" @success="onRefresh" />
    <upload-cert-modal ref="uploadCert" @success="onRefresh" />
  </div>
</template>

<script>
  import Column from './opt/Column.js'
  import SearchOpt from './opt/SearchOpt.js'
  import initiateModal from './components/initiate-modal.vue'
  import uploadCertModal from './components/upload-cert-modal.vue'
  import historyImportModal from './components/history-import-modal.vue'
  import initiateMgr from '@/biz/commission/initiate.js'

  let commissionId = null
  export default {
    components: {
      initiateModal,
      historyImportModal,
      uploadCertModal
    },
    data() {
      return {
      }
    },
    mounted() {
      commissionId = this.$route.params.businessId || null
      this.$refs.table.init(this, new Column())
      this.$refs.search.init(this.$refs.table, new SearchOpt(this))
      this.$refs.table.fetch()
      this.$$on('submit')
    },
    methods: {
      resetFun(){
        commissionId = null
      },
      onFetch(data) {
        return initiateMgr
          .list({
            ...data,
            commissionId: commissionId
          })
          .then((res) => {
            return res
          })
      },
      // 历史佣金导入
      onHistoryImport() {
        this.$refs.history.show()
      },
      onRefresh() {
        this.$refs.table.fetch()
      },
      onSubmit() {
        this.$refs.table.fetch()
      },
      // 历史佣金抹除
      onHistoryClear() {
        this.$Modal.confirm({
          title: '请确认是否清空历史佣金信息?',
          content: '<p>确认后将清空该项目下所有佣金、奖金相关信息，请慎重选择</p>',
          okText: '确认',
          onOk: () => {
            initiateMgr.commissionClear().then((res) => {
              this.$Message.success('历史佣金抹除成功')
              this.$refs.table.fetch()
            })
          }
        })
      },
      onDetail(item) {
        this.$router.push({
          path: `initiate/detail`,
          query: {
            commissionId: item.commissionId
          }
        })
      },
      onUploadCert(item) {
        this.$refs.uploadCert.show(item)
      },
      onResend(item) {
        this.$router.push({
          path: `initiate/room`,
          query: {
            commissionId: item.commissionId,
            flag: 'resend'
          }
        })
      },
      onOpen(item) {
        this.$router.push({
          path: `initiate/room`,
          query: {
            commissionId: item.commissionId
          }
        })
      },
      onDelete(item) {
        this.$Modal.confirm({
          title: '是否确认删除该请佣？',
          onOk: () => {
            initiateMgr.del(item.commissionId).then((res) => {
              this.$refs.table.fetch()
            })
          }
        })
      },
      onSuccess(res) {
        this.$router.push({
          name: `room`,
          query: {
            commissionId: res
          }
        })
      },
      onInitiate() {
        this.$refs.initiate.create()
      },
      // 撤回
      onRevocation(item) {
        this.$Modal.confirm({
          title: '确认撤回该请佣单吗?',
          onOk: () => {
            initiateMgr.revocation(item.commissionId).then((res) => {
              this.$Message.success('撤回成功')
              this.$refs.table.fetch()
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .commission {
    padding: 20px;
  }
</style>
